Mononomy Finance, Single-Page Application

The requirements for this single page application were that it would have a fixed width and be fully developed with no placeholder content.

We were required to use at least one jQuery widget, or plug-in, whether that be tabs, accordion or something else we stumbled upon, we were not limited in that regard.

We were required to include a section or an area where you load some type of content to the page either from a third-party API or from a JSON file we created. 

We were required to use web storage on the page to store and or display some information for the user. This could be content that is written to their web storage and then retrieved and or displayed on page load. Or it could be content that the user is allowed to enter into a form and then stored in web storage and displayed to them.

Finally, we were required to include a slideshow and or carousel of no less than three images. 

The requirements inspired me to create a variety of things. I came up with about 10 separate ideas, with four or five of them being highly viable. I considered creating a language, learning application and a ancestry or cultural information and or educational application, an interactive recipe book, a hub for SpaceX exploration, and a couple of others that weren’t quite as interesting.

I spent a significant amount of time over the span of a couple of days, browsing Pinterest for inspiration and for a better understanding of how I could bring one of these projects to life. I ended up landing on the personal budgeting application and or financial planning application because of the speed at which I was able to brainstorm the different elements and functionalities. When imagining this particular application, I found myself coming up with it easily.

I started out how I start out with every application. Started typing out exactly what I wanted out of the page. A lot of the times this just looks like me talking aloud about what I’m imagining as I’m voice dictating everything that comes to mind. Once I’ve gone over it completely, I feel I’ve fully thought out all of the different elements or ideas. I go back through and I create an outline from those notes, piecing everything together. It is from that outline that I’m able to build out the wireframes.

In this instance, I started with the dashboard because that is really where everything kind of comes together. What I wanted to see on the dashboard was generally the determining factor on which pages and functionalities were the most important.

Once I’ve determined everything that the site is going to consist of, and I’ve written about 37 word documents, and sketched out some wire frames, I build a skeleton of the page. When I build a skeleton of a page, it generally consists of the boiler plate, the navigation, the footer, and other generic things that you find on a webpage, like an image tag for the logo found in both the header and the footer.

From that point on, I begin to build it out page by page until it finally comes together. This project required a single page of JavaScript. This is not how I build projects of this size and or complexity. I lean more towards a modularized approach. This enables me to build out entire functionalities, work through get in branches and not break everything in the process of trying to build one thing. 

Finally, when I was bringing it all together, there were a couple of things that I recognized a few days before the deadline, that I wasn’t likely going to complete. The budgeting section originally consisted of modals that popped up individually to ask you question after question. Throughout development, this is what I referred to as the budgeting wizard. Unfortunately, due to the complex nature of that feature, ultimately, I opted for a simpler manner of execution. Now, the user’s expenses are displayed in the tab on load, where they may edit the name, the amount and the date of any of the expenses or incomes listed, as well as dynamically add more as needed. 

I considered adding in a Support and Settings tab. The Support tab consisted of various articles on how to manage your finances and answering questions about general topics such as taxes and student loans. The Settings tab was intended to offer the user various options in terms of customization. Ultimately, these features had no bearing on the viability of the delivered product. 

However, because I was unable to complete these specific features, this is definitely the next few things that I would hash out if I were given more time. This was hands-down, the most challenging and complex project I’ve endeavored upon for school and I wouldn’t go back and change that for anything.